<template>
  <a-tree-select
    v-model="value"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    dropdownMatchSelectWidth
    placeholder="请选择"
    :replaceFields="replaceFields"
    tree-default-expand-all
    @change="change"
  >
  </a-tree-select>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'selectUserTree',
  data () {
    return {
      value: undefined,
      replaceFields: {
        children: 'childOrganizations',
        title: 'name',
        key: 'id',
        value: 'id'
      }
    }
  },
  props: ['organizationId'],
  mounted () {
    console.log(this.organizationId)
    console.log(this.selectedOrgId)
    this.value = !!this.organizationId ? this.organizationId : this.selectedOrgId
  },
  methods: {
    change (e) {
      this.$emit('select', e)
    }
  },

  computed: {
    ...mapState({
      treeData: (state) => state.org.treeData,
      selectedOrgId: (state) => {
        console.log(state.org.selectedOrg)
        return state.org.selectedOrg ? [state.org.selectedOrg.id] : undefined
      }
    })
  }
}
</script>

<style scoped>

</style>